import React, { useEffect, useState } from 'react'


/*

  useEffect :
    - useEffect Hook 可以让你在函数组件中执行副作用操作
    - useEffect 可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
    - useEffect 接收的第一个参数是一个回调函数，当到达条件的时候，会触发当前的回调函数
    - useEffect 接收的第二个参数是一个数组：
        - 数组中传入 state，则当前 state 发生改变的时候触发当前的useEffect中的回调函数
        - 如果传递的是一个空数组，则 useEffect 回调函数只有在初始化阶段执行
        - 如果不传递第二个参数，则无论初始化还是更新的时候都会执行
    - useEffect 的回调函数可以返回一个函数，当组件被卸载的时候，或再次渲染的时候，会被执行这个函数用来做收尾的工作
    - useEffect 可以根据书写多次


*/ 

export default function App() {
  const [count , setCount] = useState(20);
  const [isExercise , setExercise] = useState(true);

  useEffect(() => {
    console.log('今天的锻炼项');
  },[isExercise])

  useEffect(() => {
    console.log('小明的年龄');
  },[count])

  return (
    <div>
        <h1>今天的运动项目{isExercise ? '打篮球' : '游泳'}</h1>
        <button onClick = {() => {setExercise(!isExercise)}}>点击切换锻炼项目</button>
        <hr />
        <h1>小明今年的年龄{count}</h1>
        <button onClick = {() => {setCount(count + 1)}}>点击增加一岁</button>
    </div>
  )
}
